<template>
	<view class="container">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="jiaofei" :active-color="actcolor"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<scroll-view scroll-y="true" class="page_scroll">
					<view class="card" v-if="listdata && listdata[0]" v-for="(item,index) in listdata" :key="index">
						<view class="card-top">
							<view class="top-title">快递单号：{{item.express_no}}</view>
							<view class="top-tips" v-if="item.status == 0">{{item.statusDesc}}</view>
							<view class="top-tips-old" v-if="item.status == 1">{{item.statusDesc}}</view>
							<view class="top-tips-old" v-if="item.status == 2">{{item.statusDesc}}</view>
						</view>
						<view class="card-center">
							<view class="center-title">{{item.express_name}}</view>
							<view class="center-number">{{item.fetch_code}}</view>
						</view>
						<view class="card-bottom">
							<view class="bottom-text">
								<view class="text">送件费用：￥{{item.money}}</view>
								<view class="tips" v-if="item.paid == null">未支付</view>
								<view class="tips" v-if="item.paid == 0">{{item.paidDesc}}</view>
								<view class="tips-old" v-if="item.paid == 1">{{item.paidDesc}}</view>
							</view>
							<view class="text">到件时间：{{item.add_time}}</view>
							<view class="text" v-if="item.memo">备 注：{{item.memo}}</view>
							<view class="text" v-if="!item.memo">备 注：无</view>
						</view>
						<view class="btn-box">
							<button type="primary" class="btn-left" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'" @tap="expresstime(item.id,item.money,item.price)">{{item.expressDesc}}</button>
							<button type="primary" class="btn-right" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'" @tap="confirmPickup(item.id)">{{item.chk_express}}</button>
						</view>
					</view>
					<div class='tip_box_no_data' v-if="!listdata[0]">
						<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
						<div class='no_tip_content'>
							<lang keywords="列表是空的~"></lang>
						</div>
					</div>
				</scroll-view>
			</view>
			<view v-show="current === 1">
				<scroll-view scroll-y="true" class="page_scroll">
					<view class="card" v-if="listnum && listnum[0]" v-for="(item,index) in listnum">
						<view class="card-top">
							<view class="top-title">{{item.expressDesc}}</view>
							<view class="top-text">提交时间：{{item.add_time}}</view>
						</view>
						<view class="card-bottom card-bottom1">
							<view class="bottom-text">
								<view class="text text1">{{item.send_uname}}&nbsp;{{item.send_phone}}</view>
								<view class="bottom-tips">寄</view>
							</view>
							<view class="text text2">{{item.send_adress}}</view>
						</view>
						<view class="card-bottom card-bottom1">
							<view class="bottom-text">
								<view class="text text1">{{item.collect_uname}}&nbsp;{{item.collect_phone}}</view>
								<view class="bottom-tips bottom-tips1">收</view>
							</view>
							<view class="text text2">{{item.collect_adress}}</view>
						</view>
						<view class="card-center">
							<view class="text text2">物品重量：{{item.weightDesc}}</view>
							<view class="text text3">代发费用：￥{{item.send_price}}</view>
						</view>
						<view class="text text3">备      注：{{item.remarks}}</view>
					</view>
					<div class='tip_box_no_data' v-if="!listnum[0]">
						<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
						<div class='no_tip_content'>
							<lang keywords="列表是空的~"></lang>
						</div>
					</div>
				</scroll-view>
			</view>
		</view>
		<view class="independent_payment" v-show="current === 0" @tap="goindependent">
			<image src="../../../static/images/allpickup.png" class="independent-img"></image>
		</view>
		<view class="independent_payment" v-show="current === 1" @tap="goexpressDelivery">
			<image src="../../../static/images/addexpress.png" class="independent-img"></image>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "../../../appComponent/uni/uni-segmented-control/uni-segmented-control.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// 快递代收列表
	const getexpressCollection = () => {
		common.post('HouseApi&a=express_service_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.list;
		});
	};
	// 快递代收列表
	const getexpressDelivery = () => {
		common.post('HouseApi&a=express_send_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.listnum = data.send_list;
		});
	};
	// 快递确认取件
	const getconfirmPickup = () => {
		common.post('HouseApi&a=express_edit', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			console.log('++++', data)
		});
	};
	// 快递确认取件
	const getallPickup = () => {
		common.post('HouseApi&a=confirm_receipt_all', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			console.log('++++', data)
		});
	};
	export default {
		data() {
			return {
				items: [],
				current: 0,
				listdata: {},
				listnum: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				id: 0,
				btncolor:''
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.items = ["快递代收", "快递代发"];
			console.log("current",options.current)
			if(options.current == 1){
				_this.current = 1
			}else{
				_this.current = 0
			}
			
			// #ifdef H5
				console.log('准备跳小程序页', _this);
				common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				
				if (!app.globalData.is_login || !_this.pigcms_id || _this.pigcms_id == 0) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}
				
				getexpressCollection();
				getexpressDelivery();
			});
		},
		methods: {
			// 预约上门取件
			expresstime(id,money,price){
				console.log("price",price)
				uni.navigateTo({
					url:'/pages/village/my/expressAppointment?id=' + id + "&money=" + money + '&price=' + price
				})
			},
			onClickItem(index) {
				if (_this.current !== index) {
					_this.current = index;

				}
			},
			// 去寄快递
			goexpressDelivery(){
				uni.navigateTo({
					url:'/pages/village/my/expressDelivery'
				})
			},
			// 确认取件
			confirmPickup(id){
				_this.id = id
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('确认取件吗？'),
					showCancel: true,
					cancelText: common.changeTxt('取消'),
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getconfirmPickup();
							getexpressCollection();
							
						}
					}
				});
				
			},
			// 全部取件
			goindependent(){
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('确认全部取件吗？'),
					showCancel: true,
					cancelText: common.changeTxt('取消'),
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getallPickup();
							getexpressCollection();
						}
					}
				});
				
			},
		},
		components: {
			uniSegmentedControl,
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.card {
		margin: 30rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
	}

	.card-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.card-center {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.center-title {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #000000;
	}

	.center-number {
		font-size: 32rpx;
		font-weight: 600;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #2681f3;
	}

	.top-title {
		font-size: 24rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 80rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.top-tips {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		padding: 5rpx 10rpx;
		letter-spacing: 0rpx;
		color: #ffa112;
		background-color: #f9efd2;
		border-radius: 5rpx;
	}
	.top-tips-old {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		padding: 5rpx 10rpx;
		letter-spacing: 0rpx;
		color: #2fd07b;
		background-color: #dbf8e9;
		border-radius: 5rpx;
	}
	.card-bottom {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.bottom-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.tips {
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		background-color: #ffa112;
		border-radius: 4rpx;
		margin-left: 15rpx;
		padding: 0rpx 10rpx;
	}
	.tips-old {
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		background-color: #2fd07b;
		border-radius: 4rpx;
		margin-left: 15rpx;
		padding: 0rpx 10rpx;
	}
	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.btn-left {
		background-color: #2681f3;
		border-radius: 35rpx;
		border: 0;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin: 0rpx;
		padding: 0 15rpx;
	}

	.btn-right {
		background-color: #2681f3;
		border-radius: 28rpx;
		border: 0;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin: 0rpx;
		margin-left: 15rpx;
		padding: 0 15rpx;
	}
	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
	}
	.independent-img {
		width: 100%;
		height: 100%;
	}
	/* 右侧内容页 */
	.top-text {
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}
	.bottom-tips {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
		background-color: #2681f3;
		border-radius: 18rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.bottom-tips1 {
		background-color: #ffa112;
	}
	.card-bottom1 {
		border-bottom: 2rpx solid rgba(229,229,229,0.7);
		padding: 20rpx 0;
	}
	.text1 {
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}
	.text2 {
		line-height: 40rpx;
		color: #666666;
	}
	.text3 {
		line-height: 50rpx;
		color: #666666;
	}
	/* 弹层 */
	.tip_box_no_data {
		padding-top: calc((100vh - 170rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}

	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	
	.page_scroll{
		height: calc(100vh - 80rpx);
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
</style>
